<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #qie {
        position: relative;
        float: right;
        left: -350px;
      }
      #cHinese{
          position: relative;
          float: right;
          left: -115px;
          font-size: 20px;
          top: 13px;
      }
      #fankui{
          position: relative;
          float: right;
          left: 80px;
          font-size: 20px;
          top: 13px;
      }
      #QQ{
          position: relative;
          float: right;
          top: 100px;
         right: 250px;
         font-size: 44px;
      }
      #eVery{
          position: relative;
          float: right;
          top: 170px;
          right: 50px;
          font-size: 28px;
      }
      #nIcheng{
          position: relative;
          width: 438px;
          height: 50px;
          top: -750px;
          right: 340px;
          float: right;
          font-size: 20px;
          line-height: 50px;
          border-radius: 4px;
      }
      #mIma{
          position: relative;
          width: 438px;
          height: 50px;
          top: -630px;
          right: -100px;
          float: right;
          font-size: 20px;
          line-height: 50px;
          border-radius: 4px;
      }
      #zHuce{
          width: 438px;
          height: 50px;
          border-radius: 4px;
          background-color:aqua;
          color:blue;
          font-size: 22px;
          line-height: 50px;
          text-align: center;
          float: right;
          left:543px;
          top: -522px;
          position: relative;
      }
    </style>
  </head>
  <body>
    <img src="images/01-4.jpg" alt="" />
    <img id="qie" src="images/企鹅.png" alt="" />
    <div id="cHinese">简体中文</div>
    <div id="fankui">意见反馈</div>
    <div id="QQ">欢迎注册QQ</div>
    <div id="eVery">每一天,乐在沟通</div>
    <input id="nIcheng" type="text" placeholder="请输入汉字"><span class="bnn" style="    width: 40px;
    height: 40px;position: relative;top: -694px;left: 513px;
    display: inline-block;"></span>
    <input id="mIma" type="password"  placeholder="请输入6到16位数字或字母">
    <span class="bnnn" style="width: 40px;height: 40px;position: relative;top: -569px;left: 470px;"></span>
    <input id="zHuce" type="button" value="立即注册">
  </body>
</html>
<script src="js/ajax.js"></script>
<script>
  var txt1 = document.getElementById("nIcheng");
var txt2 = document.getElementById("mIma");
var btn = document.getElementById("zHuce");

txt1.onblur = function () {
        ajax2110(
            "post",
            "./zhuce.php",
            "username=" + this.value,
            function (result) {
                if (result == 1) {
                    document.getElementsByClassName("bnn")[0].innerHTML = "恭喜你，可以使用"
                } else if (result == 0) {
                    document.getElementsByClassName("bnn")[0].innerHTML = "亲，该用户被人使用了！请重新选择！"
                } else {
                    document.getElementsByClassName("bnn")[0].innerHTML = "服务器有问题";
                }
            },
            true
        )
    }

    
let arr = /[^u4e00-u9fa5]/;
    txt1.onblur=function(){
        if(arr.test(txt1.value)==true){
            document.getElementsByClassName("bnn")[0].innerHTML='√';
           
        }else{
            document.getElementsByClassName("bnn")[0].innerHTML='X';
        }
    }
    txt1.onfocus = function () {
        document.getElementsByClassName("bnn")[0].innerHTML = "";
    }
 
    let arr1 = /^[a-zA-z_][A-Za-z0-9_]{4,9}$/;
    txt2.onblur=function(){
        if(arr1.test(txt2.value)==true){
            document.getElementsByClassName("bnnn")[0].innerHTML='√';
           
        }else{
            document.getElementsByClassName("bnnn")[0].innerHTML='X';
        }
    }
    txt1.onfocus = function () {
        document.getElementsByClassName("bnnn")[0].innerHTML = "";
    }
 btn.onclick = function () {
        // 发请求
        // 1. 创建对象
        let xhr = new XMLHttpRequest();
        // 2. 设置请求参数
        xhr.open("POST", "addUser.php");
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        // 3. 发送请求
        // xhr.send('username=zhangsan&password=1234')
        xhr.send(`username=${txt1.value}&userpass=${txt2.value}`);
   
    
        // 4. 得到响应数据
    
       
         
        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4 && xhr.status == 200) {
              
                
                if (xhr.responseText.trim() == "success" && arr.test(txt1.value)==true &&arr1.test(txt2.value)==true) {
                    alert('注册成功');
                   
                    
                    location.href = '登录页.html';
                }
                if (xhr.responseText.trim() == 'fail') {
                    alert('注册失败');
                    location.reload();
                }
            }
        }
    }
</script>